<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>JQuery Lazyload</title>
    <link rel="shortcut icon" href=""/>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

    <style>
        .panel-body {
            min-height: 200px;

        }
    </style>
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">JQuery Lazyload Plugin</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">JQuery Lazyload Plugin</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="doc/start.html">Get Started</a></li>
                <li><a href="doc/api.html">API</a></li>
                <li><a href="https://git.oschina.net/harris992/JQuery-Lazyload-Plugin" target="_blank">Contact</a></li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</nav>
<BR><BR>

<div class="container">
    <div class="row">

        <div class="col-xs-12" role="main">
            <div class="page-header">
                <h1>JQuery Lazyload
                    <small>Lazyload 演示</small>
                </h1>
            </div>

            <div class="panel panel-default">

                <div class="panel-heading">
                    Java
                </div>
                <div class="panel-body">

                </div>
            </div>
            <div class="panel panel-default">

                <div class="panel-heading">
                    C++
                </div>
                <div class="panel-body">
                </div>
            </div>
            <div class="panel panel-default">

                <div class="panel-heading">
                    JavaScript
                </div>
                <div class="panel-body">
                </div>
            </div>
            <div class="panel panel-default">

                <div class="panel-heading">
                    CSS
                </div>
                <div class="panel-body">
                </div>
            </div>
            <div class="panel panel-default">

                <div class="panel-heading">
                    HTML
                </div>
                <div class="panel-body">
                </div>
            </div>
            <div class="panel panel-default">

                <div class="panel-heading">
                    JSP
                </div>
                <div class="panel-body">
                </div>
            </div>
            <div class="panel panel-default">

                <div class="panel-heading">
                    PHP
                </div>
                <div class="panel-body">
                </div>
            </div>
            <div class="panel panel-default">

                <div class="panel-heading">
                    Go
                </div>
                <div class="panel-body">
                </div>
            </div>
            <div class="panel panel-default">

                <div class="panel-heading">
                    Android
                </div>
                <div class="panel-body">
                </div>
            </div>
            <div class="panel panel-default">

                <div class="panel-heading">
                    Oracle
                </div>
                <div class="panel-body">
                </div>
            </div>

        </div>
    </div>
</div>
</div>
<footer>
    <div class="container">
        <hr>
        <br>

        <p class="pull-right"><a href="#">Back to top</a></p>

        <p class="text-center">
            &copy;2016 huanglin992@163.com
        </p>
        <br>
    </div>
</footer>


<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-lazyload.js"></script>

<script>
    $(function () {

        $('.panel').lazyload({
            bottom: 100,
            lazyHandler: function (element) {
                loadHandler(element)
            }
        })
        function loadHandler(element) {
            var jumbotron = $('<div></div>').addClass('jumbotron')
            var title = $('<h1></h1>').text('Hello,' + $(element).find('.panel-heading').text());
            var $content = $('<p></p>').load('loadcontent.txt');
            jumbotron.append(title).append($content);
            $(element).find('.panel-body').append(jumbotron).hide();
            $(element).find('.panel-body').show('slow');
        }
    })

</script>
</body>
</html>


